import React, { Component } from "react";
import "./index.scss";
import { get } from "../../utils/Axios";
import { Grid, Flex } from "antd-mobile";

/**
 * 租房小组
 */
class MyRentingGroup extends Component {
  state = {
    // 小组信息
    groups: [],
  };

  getGroupData = async () => {
    // 这里向服务器发送请求
    const data = await get("/home/groups", {
      area: "AREA|88cff55c-aaa4-e2e0",
    });
    this.setState({
      groups: data.data.body,
    });
  };

  componentDidMount() {
    setTimeout(() => {
      this.getGroupData();
    }, 100);
  }

  render() {
    return (
      <div className="group">
        <h3 className="group-title">
          租房小组 <span className="more">更多</span>
        </h3>

        {/* 宫格组件 */}
        <Grid
          data={this.state.groups}
          columnNum={2}
          square={false}
          hasLine={false}
          renderItem={(item) => (
            <Flex className="group-item" justify="around" key={item.id}>
              <div className="desc">
                <p className="title">{item.title}</p>
                <span className="info">{item.desc}</span>
              </div>
              <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
            </Flex>
          )}
        />
      </div>
    );
  }
}

export default MyRentingGroup;
